<template>
  <div class="body-container layout-padding">
    <el-form label-width="120px" style="margin-bottom: 10px">
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form-item label="页面名称">
            <el-input v-model="state.sd.pageName" placeholder="页面名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button size="default" type="primary" class="ml10" @click="searchPage">
            <el-icon><ele-Search /></el-icon>查询
          </el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="12">
      <el-col :span="3" v-for="(page,index) in state.pageObj" :key="page.id">
        <el-card >
          <div>
            <el-image style="width: 100%; height: 150px" :src="pageImageUrl" fit="fill" />
          </div>
          <h4 style="padding-top: 10px">
            {{page.pagename}}
          </h4>
          <template #footer>
            <div>
              <el-button size="small" type="primary" @click="pageRoleList(page.id)">页面角色</el-button>
              <el-button size="small" type="primary" @click="pageUserList(page.id)">用户授权</el-button>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :title="state.popupTitle" v-model="state.pageUserListVisible" :close-on-click-modal="false" width="880px">
      <PageUser v-if="state.pageUserListVisible" v-model="state.pageUserListVisible" :pageId="state.popupEntityId"></PageUser>
    </el-dialog>
    <el-dialog :title="state.popupTitle" v-model="state.pageRoleListVisible" :close-on-click-modal="false" width="880px">
      <PageRole v-if="state.pageRoleListVisible" v-model="state.pageRoleListVisible" :pageId="state.popupEntityId"></PageRole>
    </el-dialog>
  </div>
</template>

<script setup name="roleIndex">
import request from '/@/utils/request';
import { ElMessage } from 'element-plus';
import mittBus from '/@/utils/mitt';
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent, defineProps} from "vue";
// 引入组件
const PageRole = defineAsyncComponent(() => import('/@/views/pageadmin/pageRole.vue'));
const PageUser = defineAsyncComponent(() => import('/@/views/pageadmin/pageUser.vue'));

const pageImageUrl = 'https://img2.baidu.com/it/u=1126689368,2313036616&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=370';
const state = reactive({
  sd: {
    pageName : '',
  },
  pageObj: {},

  pageUserListVisible : false,
  popupTitle : '',
  popupEntityId : 0,
  pageRoleListVisible: false
})

const searchPage = ()=>{
  loadPage();
}
const loadPage = ()=>{
  request({url: '/pageadmin/listpage', data: state.sd}).then(res => {
    const { data } = res
    state.pageObj = data
  })
}
const pageRoleList = (id)=>{
  state.popupEntityId = id;
  state.popupTitle= "页面角色查看"
  state.pageRoleListVisible= true
}
const pageUserList = (id)=>{
  state.popupEntityId = id;
  state.popupTitle= "用户授权"
  state.pageUserListVisible= true
}
onMounted(()=>{
  loadPage();
})
</script>
<style scoped>
</style>
